<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/abnormalResize'

const animationDuration = 6000

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart',
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '300px',
        },
        chartData: {
            type: Array,
            default: [],
        },
        materialName: {
            type: String,
            default: '',
        },
    },
    watch: {
        chartData(val) {
            this.$nextTick(() => {
                this.initChart(val)
            })
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart(val) {
            this.chart = echarts.init(this.$el, 'macarons')
            let chartData = [...val]
            let proList1 = []
            let proList2 = []
            let proList3 = []
            let proList4 = []
            chartData[0].proList.forEach((ko) => {
                proList1.push(parseFloat(ko))
            })
            chartData[1].proList.forEach((ko) => {
                proList2.push(parseFloat(ko))
            })
            chartData[2].proList.forEach((ko) => {
                proList3.push(parseFloat(ko))
            })
            chartData[3].proList.forEach((ko) => {
                proList4.push(parseFloat(ko))
            })
            this.chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#fff',
                    formatter: function (params) {
                        console.log(params, 'axisValueaxisValue')
                        let str = params[0].axisValue
                        let dom1 = `<div class="line-tag"><span class="icon"><i class="icon1"></i></span><span>${params[0].seriesName}：</span><span>${params[0].value}</span>--<span>${params[4].value}%</span></div>`
                        let dom2 = `<div class="line-tag"><span class="icon"><i class="icon2"></i></span><span>${params[1].seriesName}：</span><span>${params[1].value}</span>--<span>${params[5].value}%</span></div>`

                        let dom3 = params[2]
                            ? `<div class="line-tag"><span class="icon"><i class="icon3"></i></span><span>${params[2].seriesName}：</span><span>${params[2].value}</span>--<span>${params[6].value}%</span></div>`
                            : ''
                        let dom4 = params[3]
                            ? `<div class="line-tag"><span class="icon"><i class="icon4"></i></span><span>${params[3].seriesName}：</span><span>${params[3].value}</span>--<span>${params[7].value}%</span></div>`
                            : ''
                        str += dom1 + dom2 + dom3 + dom4
                        return str
                    },
                },
                legend: {
                    data: [
                        chartData[0].statisticalTime,
                        chartData[1].statisticalTime,
                        chartData[2].statisticalTime,
                        chartData[3].statisticalTime,
                    ],
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: [
                            chartData[0].middleList[0],
                            chartData[0].middleList[1],
                            chartData[0].middleList[2],
                            chartData[0].middleList[3],
                            chartData[0].middleList[4],
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '不良数：',
                        axisLine: {
                            onZero: false,
                            show: true,
                        },
                        min: 0,
                        max: 50,
                        axisLabel: {
                            formatter: '{value} ',
                        },
                    },

                    {
                        type: 'value',
                        name: '不良率：%',
                        min: 0,
                        max: 100,
                        interval: 10,
                        //纵坐标轴上的各个值对应的横线是否显示：默认显示
                        splitLine: false,
                        //splitArea : {show : true}, //保留网格区域
                        axisLabel: {
                            formatter: '{value} %',
                        },
                    },
                ],
                series: [
                    {
                        name: chartData[0].statisticalTime,
                        type: 'bar',
                        data: chartData[0].unquCountList,
                    },
                    {
                        name: chartData[1].statisticalTime,
                        type: 'bar',
                        data: chartData[1].unquCountList,
                    },
                    {
                        name: chartData[2].statisticalTime,
                        type: 'bar',
                        data: chartData[2].unquCountList,
                    },
                    {
                        name: chartData[3].statisticalTime,
                        type: 'bar',
                        data: chartData[3].unquCountList,
                    },
                    {
                        name: chartData[0].statisticalTime,
                        data: proList1,
                        yAxisIndex: 1,
                        type: 'line',
                    },
                    {
                        name: chartData[1].statisticalTime,
                        yAxisIndex: 1,
                        data: proList2,
                        type: 'line',
                    },
                    {
                        name: chartData[2].statisticalTime,
                        yAxisIndex: 1,
                        data: proList3,
                        type: 'line',
                    },
                    {
                        name: chartData[3].statisticalTime,
                        yAxisIndex: 1,
                        data: proList4,
                        type: 'line',
                    },
                ],
            })
        },
    },
}
</script>
<style scoped lang="scss">
::v-deep .line-tag {
    height: 30px;
    display: flex;
    align-items: center;
}

::v-deep .icon {
    display: inline-block;
    width: 12px;

    i {
        display: inline-block;
    }
}

::v-deep .icon1 {
    width: 8px;
    border-radius: 50%;
    height: 8px;
    background: #2ec7c9;
}

::v-deep .icon2 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b6a2de;
}

::v-deep .icon3 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5ab1ef;
}

::v-deep .icon4 {
    width: 8px;
    height: 8px;
    background: #ffb980;
    border-radius: 50%;
    vertical-align: middle;
}
</style>